<template>
  <!-- 注册页面 -->
  <div class="reg-form-container">
    <form class="reg-form" autocomplete="off" @submit.prevent="regfn">
      <!-- 输入邮箱 -->
      <div class="input-box">
        <i class="el-icon-s-promotion input-logo"></i>&nbsp;&nbsp;
        <input
          class="reg-input"
          type="text"
          name="email"
          placeholder="请输入邮箱地址"
          required
        />
      </div>
      <!-- 输入用户名、密码 -->
      <div class="input-box">
        <i class="el-icon-user input-logo"></i>&nbsp;&nbsp;
        <input
          class="reg-input"
          type="text"
          name="username"
          placeholder="请输入用户名"
          required
        />
      </div>
      <div class="input-box">
        <i class="el-icon-key input-logo"></i>&nbsp;&nbsp;
        <input
          class="reg-input"
          type="password"
          name="password"
          placeholder="请输入密码"
          required
        />
      </div>
      <!-- 确认密码 -->
      <div class="input-box">
        <i class="el-icon-view input-logo"></i>&nbsp;&nbsp;
        <input
          class="reg-input"
          type="password"
          name="confirmPassword"
          placeholder="请再次输入密码"
          required
        />
      </div>
      <button class="reg-btn">注&nbsp;&nbsp;册</button>
    </form>
  </div>
</template>

<script>
// import router from "@/router";
import axios from "axios";
export default {
  data() {
    return {};
  },
  methods: {
    // 注册函数
    async regfn() {
      // 检测输入框是否为空
      const inputs = document.querySelectorAll(".reg-input");
      for (let input of inputs) {
        if (input.value.trim() === "") {
          this.$message.error("请填写所有字段！", {
            duration: 2000,
            showClose: true,
          });
          return;
        }
      }
      // 获取输入框的值
      let email = inputs[0].value;
      // 验证邮箱格式 使用正则表达式
      const emailPattern = /^[^\s@]+@[^\s@]+\.[^\s@]+$/;
      if (!emailPattern.test(email)) {
        this.$message.error("请输入有效的邮箱地址！", {
          duration: 2000,
          showClose: true,
        });
        return;
      }
      let username = inputs[1].value;
      let password = inputs[2].value;
      let confirmPassword = inputs[3].value;
      // 检查密码和确认密码是否匹配
      if (password !== confirmPassword) {
        this.$message.error("两次输入的密码不一致，请重新输入！", {
          duration: 2000,
          showClose: true,
        });
        return;
      }

      let newuserData = { email, username, password };
      // 创建一个axios实例
      const myAxios = axios.create({
        baseURL: "http://127.0.0.1:3000",
        timeout: 3000,
        headers: { "Content-Type": "application/json" },
      });

      // 发送注册请求
      const { data: res } = await myAxios.post("/register", newuserData);
      // 根据响应结果显示消息
      if (res.status === 200) {
        // 注册成功
        this.$confirm("注册成功,即将跳转至登录", "提示", {
          confirmButtonText: "确定",
          type: "warning",
        })
          .then(() => {
            // 清空输入框内容
            inputs.forEach((input) => (input.value = ""));
            // 刷新页面
            window.location.reload();
          })
      }else if(res.status === 404) {
        // 注册失败，用户名已存在
        this.$message.error("用户名已存在，请选择其他用户名！", {
          duration: 2000,
          showClose: true,
        });
      } else {
        // 其他错误
        this.$message.error("注册失败，请稍后再试！", {
          duration: 2000,
          showClose: true,
        });
      }
    },
  },
};
</script>

<style scoped>
/* 表单容器样式 */
.reg-form-container {
  width: 250px;
  height: 250px;
}

/* 表单整体样式 */
.reg-form {
  height: 100%;
  width: 100%;

  display: flex;
  flex-direction: column;
  justify-content: space-evenly;
  align-items: center;
}

/* 输入框容器样式 */
.input-box {
  height: 12%;
  width: 80%;
  /* display: block; */
  border: #ffb188 solid;
  border-radius: 20px;
  background-color: #fff;

  display: flex;
  align-items: center;
  justify-content: center;
}

/* 输入框图标样式 */
.reg-input {
  width: 69%;
  border: none;
  display: block;
  margin: auto;
  height: 80%;
  margin-top: 2%;
  outline: none;
}

/* 输入框logo样式 */
.input-logo {
  font-size: 20px;
  color: #ffa500;
  margin-left: 15px;
}

/* 注册按钮样式 */
.reg-btn {
  width: 60%;
  height: 30px;
  border-radius: 20px;
  background-color: #ffa500;
  color: #fff;
  border: none;
  cursor: pointer;
  font-size: 17px;
  font-weight: bold;
  margin-top: 7px;
}

.reg-btn:hover {
  background-color: #fff;
  color: #ffa500;
  transition: all 0.3s ease-in-out;
}
</style>